<!--
 * @Author:
 * @Date: 2025-09-21 10:09:22
 * @LastEditors: liguigong liguigong@shopline.com
 * @LastEditTime: 2025-09-28 16:11:43
 * @FilePath: pages/uploadClothes/SelectPic.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <view class="pic">
    <image class="image" mode="aspectFit" src="/static/yangtu.png" />
  </view>
  <view class="text">
    <text>单件衣服去掉衣架</text>
    <text>平铺在白色背景</text>
    <text>尽可能拍摄正面图片（如图）</text>
  </view>
  <view class="btn" @click="dian">
    上传服饰
    <uni-file-picker
      :auto-upload="false"
      :del-icon="false"
      :disable-preview="true"
      :image-styles="imageStyle"
      :sizeType="sizeType"
      class="upload"
      limit="1"
      mode="grid"
      @select="selectPic"
      >选择
    </uni-file-picker>
  </view>
</template>
<script setup>
  const imageStyle = {
    width: 350,
    height: 50,
  };
  const emits = defineEmits(['onChange']);
  function selectPic(...e) {
    emits('onChange', e);
    console.log(e, 123);
  }
</script>
<style lang="scss" scoped>
  .upload {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
  }

  .btn {
    box-sizing: border-box;
    margin: 50rpx auto 0;
    width: 580rpx;
    height: 80rpx;
    background: #000;
    text-align: center;
    line-height: 80rpx;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 10rpx;
    position: relative;
  }

  .pic {
    padding-top: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    padding-top: 100rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text {
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 44rpx;
    }
  }

  .image {
    width: 485rpx;
    height: 700rpx;
  }
</style>
